<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/lib/bootstrap.min.css"/>
        <script src="js/lib/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="js/countUp.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>    
        <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
    </head>
     <style>
          body{
                font-size:12px;
             }
        input{
            width:280px;
        }
        span{
            width:20px;color:red;display:inline-block;text-align:center;
        }
        #sho{
            width:300px;
            height:50px;
            background:#d9534f;
            opacity:0.8;
            border-radius:8px;
            color:#fff;
            text-align: center;
            font-size:30px;
            position: absolute;
            top:0px;
            left:550px;
            display:none;
        }
        #tr-1 div{
             box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
            text-shadow: 0 1px 1px #FFF;
            background-color: #E6E6E6;
            overflow:hidden;  
        } 
        #tr-2 div{
             box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
            text-shadow: 0 1px 1px #FFF;
            background-color: #E6E6E6;
            overflow:hidden;    
        } 
        #tr-3 div{
             box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
            text-shadow: 0 1px 1px #FFF;
            background-color: #E6E6E6;
            overflow:hidden;    
        } 
     </style>
    <body ng-app="myApp" ng-controller="customersCtrl">
        <div class="">
            <div id="sho"></div>
        <!--更新用户账户信息-->
            <div style="padding:15px 5px 0px 5px;border:0px solid #ccc;margin-bottom:15px;position:relative;">
            <table id="tab" class="table table-hover">
                
                <tbody id="datatable">
                    <tr id="tr-1" style="font-size:26px;color:#f49827">
                        <th colspan="13" style="border-top:0">
                            <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;margin-left:200px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">今日成交量（笔）</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp1">1000</span>
                            </div>
                            <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">今日充值（元）</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp2">1000</span>
                            </div>
                           <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">今日提现（元）</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp3">1000</span>
                            </div>
                        </th>
                    </tr>
                    <tr>
                        <td id="tr-2" style="font-size:26px;color:#337ab7;border-top:0">
                              <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;margin-left:200px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">当月成交笔数：</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp4">1000</span>
                            </div>
                            <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">当月充值金额：</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp5">1000</span>
                            </div>
                           <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">当月提现金额：</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp6">1000</span>
                            </div>
                        </td>
                    </tr>            
                    <tr>
                        <td id="tr-3" style="font-size:26px;color:#337ab7;border-top:0">
                              <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;margin-left:200px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">总成交笔数：</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp7">1000</span>
                            </div>
                            <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">总充值金额：</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp8">1000</span>
                            </div>
                           <div style="width:280px;height:150px;background:#E6E6E6;float:left;margin-right:10px;">
                                <span style="display:inline-block;color:#666;font-size:26px;text-align:center;width:280px;height:60px;line-height:60px;">总提现金额：</span>
                                <span style="display:inline-block;font-size:40px;width:280px;text-align:center;color:#f49827" id="sp9">1000</span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="main" style="width:500px;height:700px;background:#ccc">
                                
                            </div>
                        </td>
                    </tr>        
                </tbody>
            </table>
        </div>
        </div>
    </body>
    <script>
    var myChart = echarts.init(document.getElementById('main'));
       var option = {
                    title : {
                        text: '后台管理数据',
                        subtext: '当月数据',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'},
                                {value:135, name:'视频广告'},
                                {value:1548, name:'搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                 // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

        $(function(){
            $("input[type='button']").click(function(){ //获取今日交易成功笔数              
        
            }); 
            var bd = sessionStorage.getItem(key=3);
            $.ajax({
                    type:"POST",//平台交易汇总
                    url:window.baseUrl+"transactionclear/payment/query/sum/brand",
                    dataType:"json",
                    async:true,
                    data:{brand_id:bd},
                    success:function(data){
                        console.log("平台交易开始远程调用。。。")
                        console.log(data)
                       /* sessionStorage.setItem(101,data.result.daysum.transactionCount);
                        sessionStorage.setItem(102,(data.result.daysum.RechargeSum));
                        sessionStorage.setItem(103,(data.result.daysum.withdrawSum));
                        sessionStorage.setItem(104,data.result.monthsum.transactionCount);
                        sessionStorage.setItem(105,data.result.monthsum.RechargeSum);
                        sessionStorage.setItem(106,(data.result.monthsum.withdrawSum)); 
                        sessionStorage.setItem(107,data.result.allsum.transactionCount);
                        sessionStorage.setItem(108,(data.result.allsum.RechargeSum));
                        sessionStorage.setItem(109,(data.result.allsum.withdrawSum));*/
                        $('#sp1').html(data.result.daysum.transactionCount) 
                        $('#sp2').html(data.result.daysum.RechargeSum) 
                        $('#sp3').html(data.result.daysum.withdrawSum) 
                        $('#sp4').html(data.result.monthsum.transactionCount) 
                        $('#sp5').html(data.result.monthsum.RechargeSum) 
                        $('#sp6').html(data.result.monthsum.withdrawSum) 
                        $('#sp7').html(data.result.allsum.transactionCount) 
                        $('#sp8').html(data.result.allsum.RechargeSum) 
                        $('#sp9').text(data.result.allsum.withdrawSum) 
                        /*window.location.href="交易数据汇总.html" */                        
                    },
                    error:function(data){
                        console.log("调用失败!")
                        console.log(data)
                    }
            }) 

            // $.ajax({
            //         type:"POST",//贴牌交易汇总
            //         url:window.baseUrl+"transactionclear/payment/query/sum/brand",
            //         dataType:"json",
            //         async:true,
            //         data:{brand_id:3},
            //         success:function(data){
            //             console.log("贴牌交易汇总开始远程调用。。。")
            //             console.log(data)
            //             console.log(data.result)
            //             console.log(data.result.daysum.transactionCount);//单天成功交易笔数
            //             console.log(data.result.daysum.RechargeSum);//单天充值金额
            //             console.log(data.result.daysum.withdrawSum);//单天提现金额
            //             console.log(data.result.allsum.transactionCount);//单月成功交易笔数
            //             console.log(data.result.allsum.RechargeSum);//单月充值金额
            //             console.log(data.result.allsum.withdrawSum);//单月提现金额                                        
            //         },
            //         error:function(data){
            //             alert("网络不稳定，请重试！")
            //             console.log(data)
            //         }
            // })                     
        })
    </script>
    <script>
         var options = {
                 useEasing : true, 
                  useGrouping : true, 
                  separator : ',', 
                  decimal : '.', 
                  prefix : '', 
                  suffix : '' 
             };
        var x1 = sessionStorage.getItem(key = 101);
        var x2 = sessionStorage.getItem(key = 102);
        var x3 = sessionStorage.getItem(key = 103);
        var x4 = sessionStorage.getItem(key = 104);     
        var x5 = sessionStorage.getItem(key = 105);
        var x6 = sessionStorage.getItem(key = 106);
        var x7 = sessionStorage.getItem(key = 107);
        var x8 = sessionStorage.getItem(key = 108);
        var x9 = sessionStorage.getItem(key = 109);
        var demo1 = new CountUp("sp1", 0, x1, 0, 2.5, options);
        var demo2 = new CountUp("sp2", 0, x2, 0, 3, options);
        var demo3 = new CountUp("sp3", 0, x3, 0, 2.5, options);
        var demo4 = new CountUp("sp4", 0, x4, 0, 2.5, options);
        var demo5 = new CountUp("sp5", 0, x5, 0, 2.5, options);
        var demo6 = new CountUp("sp6", 0, x6, 0, 2.5, options);
        var demo7 = new CountUp("sp7", 0, x7, 0, 2.5, options);
        var demo8 = new CountUp("sp8", 0, x8, 0, 2.5, options);
        var demo9 = new CountUp("sp9", 0, x9, 0, 2.5, options);
        demo1.start();
        demo2.start();
        demo3.start();
        demo4.start();
        demo5.start();
        demo6.start(); 
        demo7.start();
        demo8.start();
        demo9.start();      
    </script>
</html>

